<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-left">
        <UserLeft></UserLeft>
      </div>
      <div class="user-right">
        <h1>修改负责人手机号<span> (*是必填项)</span></h1>
        <div class="user-info-box">
          <el-form
            ref="ruleForm"
            :rules="rules"
            label-position="right"
            label-width="160px"
            :model="ruleForm"
          >
            <el-form-item label="已绑定：">
              <p>{{ userInfo.phone }}</p>
            </el-form-item>
            <el-form-item label="当前账号密码：" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <!-- <el-form-item label="验证码：" prop="code">
              <el-input v-model="ruleForm.code" style="width: 200px"></el-input>
              <img
                class="code-img"
                src="@/assets/images/userCenter/header_img.png"
                alt=""
              />
            </el-form-item> -->
            <el-form-item label="新手机号：" prop="newPhone">
              <el-input v-model="ruleForm.newPhone"> </el-input>
            </el-form-item>
            <el-form-item label="短信校验码：" prop="smsCode">
              <el-input v-model="ruleForm.smsCode" style="width: 200px">
              </el-input>
              <el-button
                class="code-btn code"
                :disabled="isDisabled"
                type="primary"
                @click="sendCode"
                >{{ buttonText }}</el-button
              >
            </el-form-item>
          </el-form>
          <div class="submit-box">
            <el-button class="submit" @click="submit()" type="primary"
              >提交</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserLeft from "./components/UserLeft";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    UserLeft,
  },
  data() {
    const validateUserPhone = (rule, value, callback) => {
      if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      buttonText: "获取验证码",
      isDisabled: false, // 是否禁止点击发送验证码按钮
      ruleForm: {
        password: "",
        // code: "",
        newPhone: "",
        smsCode: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入当前账号密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        // code: [
        //   { required: true, message: "请输入验证码", trigger: "blur" },
        //   {
        //     min: 4,
        //     max: 4,
        //     message: "请输入正确的验证码",
        //     trigger: "blur",
        //   },
        // ],
        newPhone: [
          { required: true, message: "请输入新手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确手机号",
            validator: validateUserPhone,
          },
        ],
        smsCode: [
          { required: true, message: "请输入短信校验码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["sendSms", "changePhone","getUserInfo"]),
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
              password: this.ruleForm.password,
              new_phone: this.ruleForm.newPhone,
              phone_code: this.ruleForm.smsCode,
            };
            this.changePhone(data).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$refs.ruleForm.resetFields();
              this.getUserInfo();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sendCode() {
      this.$refs.ruleForm.validateField("newPhone", (phoneError) => {
        if (!phoneError) {
          this.sendSms({ mobile: this.ruleForm.newPhone, type: 2 }).then(
            (res) => {
              this.changeBtnText();
            }
          );
        }
      });
    },
    changeBtnText() {
      let time = 60;
      this.isDisabled = true;
      this.buttonText = "已发送（" + time + " s）";
      let timer = setInterval(() => {
        time--;
        this.buttonText = "已发送（" + time + " s）";
        if (time === 0) {
          clearInterval(timer);
          this.buttonText = "重新获取";
          this.isDisabled = false;
        }
      }, 1000);
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>

<style scoped>
.user-info-box {
  padding-right: 300px;
  min-height: 700px;
}
.phone {
  border: none;
}
.code-btn {
  background: #f1f7ff;
  color: #0b4696;
  border: none;
  margin-left: 20px;
  width: 160px;
  font-size: 16px;
}
.code-img {
  margin-left: 20px;
  width: 160px;
  height: 40px;
  vertical-align: middle;
}
</style>